<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>my-collection</title>
    <link rel="stylesheet" href="#(ctx_path)/lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="#(ctx_path)/lib/layui/css/layui.css"  media="all">
    <script src="#(ctx_path)/lib/bootstrap/js/jquery-1.10.2.min.js"></script>
    <script src="#(ctx_path)/lib/bootstrap/js/bootstrap.js"></script>
    <script src="#(ctx_path)/lib/layui/layui.js" charset="utf-8"></script>
    <style>
        
        #myTab > li{
            width:50%;
        }
        
        #myTab > li >a{
            font-size: 16px;
            color:#555555;
            font-family:"宋体";
            font-weight: bolder;
            text-align: center;
        }
        #myTab > li.active >a{
            font-size: 16px;
            font-weight: bolder;
            background: #F3F4F7;
        }
        
        .oneRow{
            background-color: rgb(243, 244, 247);
            height: 122px;
            padding: 10px 8px 0px 8px;
        }
        .content{
            height: 100%; 
            padding: 15px 8px 0 8px;
            background:white;
            border-radius: 8px;
        }
        .rowUp{
            position: relative;
            height: 48px;
            border-bottom:1px solid #EEECEC;
        }
        .rowDown{
            margin-top: 8px;
        }
        .logo{
            display: inline-block;
            float: left;
            margin-right: 6px;
        }
        .div_des{
            color: #ABABAB;
            font-size: 11px;
        }
        .div_btn{
            position: absolute;
            right: 12px;
            cursor: pointer;
            top:8px;
            z-index: 100; 
            width: 70px;
            text-align: center; 
            line-height: 23px; 
            height: 23px;
            color: white;
            background: #229EE6; 
            border-radius: 15px;
            font-size: 11px;
        }
        .div1{
            float: left;
            width: 33.3%;
            text-align: left;
        }
        .div2{
            float: left;
            width: 33.3%;
            text-align: center;
        }
        .div3{
            float: left;
            width: 33.3%;
            text-align: right;
        }
        .div1>p:nth-child(1),.div2>p:nth-child(1),.div3>p:nth-child(1){
            margin: 0;
            color: #ABABAB;
            font-size: 11px;
        }
        .div1>p:nth-child(2),.div2>p:nth-child(2),.div3>p:nth-child(2){
            margin: 0;
            color: #FF782A;
        }
        /*流加载button样式*/
        .layui-flow-more a cite{
            color: #9c9c9c;
            font-size: 15px;
            line-height: 20px;
            height: 20px;
        }
        .layui-flow-more,.layui-flow-more a{
            line-height: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
<!--
<ul id="myTab" class="nav nav-tabs">
    <li class="active" id="smallMli">
        <a href="#smallM" data-toggle="tab">
            小额贷款
        </a>
    </li>
   <li id="bigMli">
        <a href="#bigM" data-toggle="tab">大额贷款</a>
    </li>
</ul>-->
    
<div class="container">
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="smallM">

        </div>
        
        
        <!-- tab 2 -->
        <!--<div class="tab-pane fade" id="bigM">

        </div>-->
        <!--<div class="tab-pane fade" id="jmeter">
            <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
        </div>
        <div class="tab-pane fade" id="ejb">
            <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
            </p>
        </div>-->
    </div>
</div>
</body>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript" src="#(ctx_path)/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="#(ctx_path)/lib/JSUtils/Tools.js"></script>
<script >

    $(function(){
        var customer = '#(session.customer ??)';
        if (customer != "") {
            initFlow();
        }
    });

    var G_pageSize = 8;//每一页的数量
    var G_pageNumber;//当前页
    function initFlow(){
        layui.use('flow', function(){
            var flow = layui.flow;
            flow.load({
                elem: '#smallM' //流加载容器
                ,isAuto:false
                ,done: function(G_pageNumber, next){ //执行下一页的回调
                    initData($("#smallM"),G_pageSize,G_pageNumber,next);
                }
            });
        });
    }


    function initData(obj,Size,Number,next){
        imgArr.splice(0,imgArr.length);
        var lis = [];
        //初始化第一页数据
        Number = Number || 1;
        var isShowDetailPage = 'yes';
        var parms = {"pageNumber":Number,"pageSize":Size};
        $.ajax({
            type: 'POST',
            url: '#(ctx_path)/mobile/productList/findMyCollection',
            data: parms,
            async:false,//同步
            dataType: 'json',
            success: function (data) {
                var totalPage = data.totalPage;//总页数
                var pageNumber = data.pageNumber;//当前页
                var totalRow = data.totalRow;//总条数
                for (var i = 0; i < data.list.length; i++) {
                    var html = "";
                    html+='<div class="row oneRow">';
                    html+='    <div class="content">';
                    html+='    <div class="rowUp">';
                    html+= '    <img src="" class="logo" width="40px" height="40px" alt="logo">';
                    imgArr.push('#(ctx_path)/upload/'+ data.list[i].logo);
                    html+='    <div  alt="name">'+ data.list[i].name +'</div>';
                    html+='    <div class="div_des" alt="description">'+ data.list[i].description +'</div>';
                    html+= '<a class="div_btn" href="javascript:statistics(\'#(ctx_path)\','+ data.list[i].id +',\''+ data.list[i].url + '\',\''+isShowDetailPage + '\');" >立即申请</a>';
                    html+='    </div>';
                    html+='    <div class="rowDown">';
                    html+='    <div class="div1">';
                    html+='    <p>额度最高</p>';
                    html+='    <p>'+ data.list[i].maxlimit +'</p>';
                    html+='</div>';
                    html+='<div class="div2">';
                    html+='    <p>日利率最低</p>';
                    html+='    <p>'+ data.list[i].rate +'</p>';
                    html+='    </div>';
                    html+='    <div class="div3">';
                    html+='    <p>借款期限</p>';
                    html+='    <p>'+ data.list[i].deadline +'</p>';
                    html+='</div>';
                    html+='</div>';
                    html+='</div>';
                    html+='</div>';
                    lis.push(html);
                }
                next(lis.join(''), pageNumber < totalPage);
            },
            error:function (data) {
                layer.msg('系统错误，请联系管理员！', {icon: 5,time:1500});
                console.log(data);
            }
        });
        setTimeout(initImg($(obj)),1000);
    }

</script>
</html>